<template>
  <div id="scale"></div>
</template>

<script>
import { selectscales } from '../../../api/dataCenter';
import { findDictByCode } from '../../../api/index';
export default {
  name: 'scale',
  data () {
    return {
      name: [],
      value: []
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('scale'));
      // 绘制图表
      myChart.setOption({
        tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' },
        legend: {
          type: 'scroll',
          top: 15,
          right: 10,
          width: 250,
          pageButtonPosition: 'end',
          textStyle: {
            color: '#fff'
          },
          data: this.name,
          pageTextStyle: {
            color: '#fff'
          }
        },
        // color: ['#27E4FD', '#FEA829', '#20D128', '#3325E5', '#ECFD36', '#9B64C7', '#1162FB'],
        series: [
          {
            type: 'pie',
            // radius: ['50%', '70%'],
            // avoidLabelOverlap: false,
            left: 150,
            top: 40,
            width: 200,
            height: 200,
            selectedMode: 'single',
            label: {
              formatter: '{c}',
              color: '#fff'
            },
            labelLine: {
              show: true
            },
            data: this.data,
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          }
        ]
      });
    }
  },
  mounted () {
    let obj = {};
    findDictByCode('scale')
      .then(data => {
        if (data.success) {
          console.log(data);
          data.data.forEach(item => {
            obj[item.name] = item.val;
          });
          obj['未知'] = 0;
          console.log(obj);
          return selectscales();
        }
      })
      .then(data => {
        console.log(data);
        if (data.success) {
          this.data = Object.keys(obj).map(val => {
            let dataItem = { name: val };
            dataItem.value = data.data.find(item => {
              if (item.scale === null) {
                return obj[val] === 0;
              } else {
                return obj[val] === item.scale;
              }
            }).scaleCount;
            return dataItem;
          });
          this.name = Object.keys(obj);
          console.log(this.data);
          this.drawLine();
        }
      });
  }
};
</script>

<style scoped>
#scale {
    width: 500px;
    height: 242px;
    margin: 20px 0;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/scale.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>